<template>
  <div>
    <van-row>
      <van-col span="24">
        <van-nav-bar
          left-text="搜索"
          @click-left="onClickLeft"
          left-arrow
          :title="title"
        />
      </van-col>
    </van-row>
    <van-row>
      <van-col span="24">
        <template v-for="(it, index) in musiclist">
          <van-card
            @click="change(it)"
            :key="index"
            :title="it.name"
            :thumb="it.pic"
          />
        </template>
      </van-col>
    </van-row>
    <van-row>
      <van-col span="24">
        <van-pagination
          v-model="currentPage"
          :total-items="total"
          :show-page-size="3"
          force-ellipses
          @change="pagechange"
        />
      </van-col>
    </van-row>
  </div>
</template>

<script>
export default {
  data() {
    return {
      title: "",
      currentPage: 1,
      musiclist: [],
      total: 0,
    };
  },
  methods: {
    pagechange:async function (page) {
      let res = await this.$http.get("/search", {
        params: { key: this.$route.query.key, page: page },
      });
      this.musiclist = res.data.list;
    },
    change: function (it) {
      this.$router.push({ path: "/play", query: { it } });
    },
    onClickLeft: function () {
      this.$router.push("/search");
    },
  },
  async mounted() {
    let res = await this.$http.get("/search", {
      params: { key: this.$route.query.key, page: this.currentPage },
    });
    this.musiclist = res.data.list;
    this.total = res.data.total;
    this.title = this.$route.query.key;
    // console.log(this.musiclist);
  },
};
</script>

<style>
</style>